<template>
    <div>
        <Form :model="formItem" :label-width="180" label-position="right">
            <Card :bordered="false" style="background:#fff;padding: 20px;width: 70vw;">
                <p slot="title">修改工位/办公室</p>

                <!--   <FormItem label="所属分部：">
                    <Select class="FormItemInput" v-model="formItem.branchid" @on-change="branchSelection">
                        <Option v-for="item in branchs " :value="item.value" :key="item.value"> {{ item.label }} </Option>
                    </Select>
                </FormItem>

                  <FormItem label="所属楼层：">
                    <Select class="FormItemInput" v-model="formItem.floorid" @on-change="floorSelection" :disabled="isFloorDisabled">
                        <Option v-for="item in floors " :value="item.value" :key="item.value"> {{ item.label }} </Option>
                    </Select>
                </FormItem>

                  <FormItem label="所属区域：">
                    <Select class="FormItemInput" v-model="formItem.regionid" :disabled=" isModuleDisabled">
                        <Option v-for="item in modules " :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                </FormItem> -->

                <FormItem label="工位/办公室编号：">
                    <Input v-model="formItem.number" class="FormItemInput"></Input>
                </FormItem>


                <FormItem label="办公类型：">
                    <Select class="FormItemInput" v-model="formItem.work_type">
                        <Option :value="1"> 开放办公 </Option>
                        <Option :value="2"> 独立办公</Option>
                    </Select>
                </FormItem>

                <FormItem label="工位/办公室面积：">
                    <Input v-model="formItem.measure" class="FormItemInput"></Input>
                </FormItem>

                <FormItem label="工位/办公室价格：">
                    <Input v-model="formItem.price" class="FormItemInput"></Input>
                </FormItem>

                <FormItem label="建议使用人数：">
                    <Input v-model="formItem.suggest_person_num" class="FormItemInput"></Input>
                </FormItem>

                <FormItem label="窗户朝向：">
                    <Input v-model="formItem.window_direction" class="FormItemInput"></Input>
                </FormItem>

                <FormItem label="有无室内空调：">
                    <RadioGroup v-model="formItem.is_indoor_air">
                        <Radio :label="0">无</Radio>
                        <Radio :label="1">有</Radio>
                    </RadioGroup>
                </FormItem>

                <FormItem label="工位/办公室图片：">
                    <input type="file" @change="upImg($event,'ws_pic')" accept="image/*">
                    <div class="picDiv">
                        <img class="pic" v-if="!formItem.ws_pic.length" :src="defaultPic">
                        <div class="picBox" v-else v-for="(item, index) in formItem.ws_pic" :key="index">
                            <img class="pic" :src="item">
                            <p class="close" @click="picDel(index,'ws_pic')">
                                <img src="@/assets/images/close.png" />
                            </p>
                        </div>
                    </div>
                </FormItem>

                <Button type="primary" class="sure_btn" @click="save">保存</Button>
            </Card>
        </Form>
    </div>
</template>
<script>
    import {
        mapMutations
    } from 'vuex'
    import axios from '@/libs/api.request'
    export default {
        name: 'workstation-edit',
        data() {
            return {
                defaultPic: require('@/assets/images/addressAddBtn_03.jpg'),
                // 分部列表
                branchs: [],

                // 楼层列表
                floors: [],

                // 模块列表
                modules: [],

                // 是否禁用楼层选择
                isFloorDisabled: true,

                // 是否禁用区域选择
                isModuleDisabled: true,

                formItem: {}
            }
        },
        methods: {
            ...mapMutations(['myClose', 'removeCatchPages']),

            // 获取分部->楼层->区域列表
            getBranchAndFloorAndModuleList() {
                axios.ajax_post('admin-base-ajax_get_cp_linkage', {}).then(res => {
                    if (res.data.code === 1) {
                        // this.$Notice.success({
                        //     title: res.data.msg,
                        //     duration: 3
                        // })
                        // 深拷贝
                        this.branchs = JSON.parse(JSON.stringify(res.data.data.list))
                    } else {
                        this.$Notice.error({
                            title: res.data.msg,
                            duration: 3
                        })
                    }
                })
            },

            // 所属分部选择
            branchSelection(value) {
                if (value) {
                    // 所属分部对应的楼层列表
                    this.branchs.forEach((item) => {
                        if (item.value == value) {
                            this.floors = item.children;
                        }
                    })
                    // 启用楼层选择
                    this.isFloorDisabled = false
                    // 清空区域列表
                    this.modules = []
                    // 禁用区域选择
                    this.formItem.regionid = ''
                    this.isModuleDisabled = true
                }
            },

            // 所属楼层选择
            floorSelection(value) {
                if (value) {
                    // 所属分部对应的楼层列表
                    this.floors.forEach((item) => {
                        if (item.value == value) {
                            this.modules = item.children
                        }
                    })
                    // 启用区域选择
                    this.isModuleDisabled = false
                }
            },

            close() {
                // 销毁缓存
                this.removeCatchPages(this.$options.name)
                this.myClose('workstation-edit')
            },

            // 上传图片
            upImg(e, mk) {
                const file = e.target.files
                for (let i = 0; i < file.length; i++) {
                    // up_to_cos 第二个参数表示返回的url类型
                    // 0：cos，1：cdn,2:带图片处理的cdn
                    axios.up_to_oos(file[i], (file_url) => {
                        this.formItem[mk].push(file_url)
                    })
                }
            },

            // 删除图片
            picDel(index, mk) {
                this.formItem[mk].splice(index, 1)
            },

            // 保存
            save() {
                let data = {
                    wsid: this.formItem.id,
                    number: this.formItem.number,
                    work_type: this.formItem.work_type,
                    measure: this.formItem.measure,
                    price: this.formItem.price,
                    suggest_person_num: this.formItem.suggest_person_num,
                    window_direction: this.formItem.window_direction,
                    is_indoor_air: this.formItem.is_indoor_air,
                    ws_pic: this.formItem.ws_pic
                }
                axios.ajax_post('admin-work_station-ajax_save_ws', data).then(res => {
                    if (res.data.code === 1) {
                        this.$Notice.success({
                            title: res.data.msg,
                            duration: 3
                        })
                        this.close()
                    } else {
                        this.$Notice.error({
                            title: res.data.msg,
                            duration: 3
                        })
                    }
                })
            }
        },
        created() {

            this.formItem = JSON.parse(JSON.stringify(this.$route.params))
            this.getBranchAndFloorAndModuleList()
        },
        activated() {
            if (this.formItem.id != this.$route.params.id) {
                this.formItem = JSON.parse(JSON.stringify(this.$route.params))
            }
        }
    }
</script>
<style lang="less" scoped>
    .FormItemInput {
        width: 30vw;

        &.inline {
            width: 14vw;
            margin-right: 28px;

            &:nth-of-type(2n) {
                margin-right: 0;
            }
        }
    }

    .sure_btn {
        margin-left: 30vw;
        width: 10vw;
    }

    .picDiv {
        width: 150px;
        display: flex;
        position: relative;
        padding-top: 15px;
    }

    .picDiv .pic {
        width: 150px;
    }

    .picBox {
        position: relative;
        margin-right: 20px;
    }

    .close {
        position: absolute;
        top: -7px;
        right: -7px;
        cursor: pointer;
    }
</style>